{% extends 'base.html' %}
{% load url from future %}

{% block extra_js %}
  require(['networkx']);
  var HOSTNAME = '{{ hostname }}';
  var GRAPH_ID = {% if graph_id %}{{ graph_id }}{% else %}null{% endif %};
{% endblock %}

{% block nav %}
<div class="topbar">
  <a class="title" href="/">Network Visualizer X</a>
  <span id="links">
    {% if google_user %}
      <span class="navbar-text">{{ google_user.email }}</span> |
      <a href="{% url 'oauth2logout' %}">Logout</a> |
      <a id="link-help" href="{% url 'help' %}">Help</a>
    {% endif %}
  </span>
</div>
{% endblock %}  {# end |nav| #}

{% block sidebar %}
{% if google_user %}
<div id="sidebar">
  <div id="sidebar-content">
    <span id="btn-create" class="btn red">Create Visualization</span>

    {# List of all visualizations as a clickable entry. #}
    <div id="graph-list">
    {% if graphs %}
      {% for graph in graphs %}
      <div id="v-{{ graph.key.id }}"
           class="graph-entry
           {% if graph_id and graph_id == graph.key.id %}selected{% endif%}">
        {{ graph.name }}
      </div>
      {% endfor %}
    {% endif %}
    </div>

    {# Panel for both creating and editng visualizations. #}
    <div id="edit-pane">
      <div id="btn-save" class="btn red">Save</div>
      <div class="btn btn-cancel">Cancel</div>
      <div id="edit-pane-content">
        {% include 'graph/graph_form.html' %}
      </div>
      <div id="btn-delete" class="btn">Delete</div>
    </div>

  </div>
</div>
{% endif %}
{% endblock %}  {# end |sidebar| #}

{% block content %}
{% if google_user %}

<div id="view">
  {% if graph %}
    {% include "graph/graph_detail.html" %}
  {% else %}
    <div class="faded-counter">{{ graphs_count }}</div>
  {% endif %}
</div>

<div id="help" class="hidden no-hover">
  {% include "help.html" %}
</div>

<div id="btnbar" {% if not graph_id %}class="hidden"{% endif %}>
  {# Actions panel which is only visible when a visualization is open. #}
  <div id="graph-actions">
    <span id="btn-edit" class="btn">Edit</span>
    <span id="btn-refresh" class="btn">
      <span id="tooltip-refresh" class="tooltip hidden no-hover">Reload visualization data.</span>
    </span>

    <span id="btn-embed" class="btn">Embed</span>
    <textarea id="snippet" class="hidden" readonly>N/A</textarea>
  </div>
</div>

{% else %}  {# no |google_user| #}

<div class="intro">
  <h2>What is Network Visualizer X?</h2>
  <div class="text small center">
    <p>A tool that makes it simple for NGOs to
    generate visualizations of networks of support.
    It can also be used to create network graphs for other types of data.</p>
    <p>To get started, login with your google account.</p>
  </div>
  <a class="btn red" href="{% url 'login' %}">Login</a>
</div>

{% endif %}  {# end |google_user| #}

<div id="butterbar" class="hidden"></div>

{% endblock %}  {# end |content| #}
